<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
		<title>滑动</title>

		<link rel="stylesheet" type="text/css" href="../css/tool/hIscroll.css" />
		<!-- <link rel="stylesheet" type="text/css" href="../css/vIscroll.css" /> -->


		<script type="text/javascript" src="../plugins/zepto.js"></script>
		<script type="text/javascript" src="../plugins/iscroll/iscroll.js"></script>
		<script type="text/javascript" src="../js/tool/iscrollTool2.js"></script>
		<script type="text/javascript">

		//横向
		document.addEventListener('DOMContentLoaded', function(){ new iScroll('wrapper')}, false);

		//竖向
			// document.addEventListener('DOMContentLoaded', function () { loaded(
			// 	function(){
			// 		setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
			// 			var el, li, i;
			// 			el = document.getElementById('thelist');

			// 			for (i=0; i<3; i++) {
			// 				li = document.createElement('li');
			// 				li.innerText = 'Generated row ' + (++generatedCount);
			// 				el.insertBefore(li, el.childNodes[0]);
			// 			}
						
			// 			myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
			// 		}, 1000);
			// 	}, 
			// 	function(){
			// 		setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
			// 			var el, li, i;
			// 			el = document.getElementById('thelist');

			// 			for (i=0; i<3; i++) {
			// 				li = document.createElement('li');
			// 				li.innerText = 'Generated row ' + (++generatedCount);
			// 				el.appendChild(li, el.childNodes[0]);
			// 			}
						
			// 			myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
			// 		}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
			// 	}

			// 	); }, false);

		</script>
		
	</head>

	<body>

		<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
		<div id="wrapper">
			<div id="scroller">
				<div id="pullDown">
					<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
				</div>

				<ul id="thelist">
					<li>Pretty row 1</li>
					<li>Pretty row 2</li>
					<li>Pretty row 3</li>
					<li>Pretty row 4</li>
					<li>Pretty row 5</li>
					<li>Pretty row 6</li>
					<li>Pretty row 7</li>
					<li>Pretty row 8</li>
					<li>Pretty row 9</li>
					<li>Pretty row 10</li>
					<li>Pretty row 11</li>
					<li>Pretty row 12</li>
					<li>Pretty row 13</li>
					<li>Pretty row 14</li>
					<li>Pretty row 15</li>
					<li>Pretty row 16</li>
					<li>Pretty row 17</li>
					<li>Pretty row 18</li>
					<li>Pretty row 19</li>
					<li>Pretty row 20</li>
					<li>Pretty row 21</li>
					<li>Pretty row 22</li>
					<li>Pretty row 23</li>
					<li>Pretty row 24</li>
					<li>Pretty row 25</li>
					<li>Pretty row 26</li>
					<li>Pretty row 27</li>
					<li>Pretty row 28</li>
					<li>Pretty row 29</li>
					<li>Pretty row 30</li>
					<li>Pretty row 31</li>
					<li>Pretty row 32</li>
					<li>Pretty row 33</li>
					<li>Pretty row 34</li>
					<li>Pretty row 35</li>
					<li>Pretty row 36</li>
					<li>Pretty row 37</li>
					<li>Pretty row 38</li>
					<li>Pretty row 39</li>
					<li>Pretty row 40</li>
				</ul>
				<div id="pullUp">
					<span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
				</div>
			</div>
		</div>
		<div id="footer"></div>

</body>
</html>